<script setup>
import { onMounted, toRefs, defineProps, reactive} from "vue";

const props = defineProps({
  sectionVo: {
    type: Object,
    default: () => ({
      sectionReport: 0,
      pass: 0,
      noPass: 0,
      warn: 0
    })
  },
  title: {
    type: String,
    default: '上报采购包或标段总数',
  },

  type: {
    type: String,
    default: 'zs',
  },
});
const { title,type,sectionVo } = toRefs(props);

</script>

<template>
    <div class="main-card grid-main-card ">
        <div class="card-title">
            <card-title :title="title"></card-title>
        </div>

        <div class="main-content">
            <div class="num" v-if="type == 'zs'">{{ sectionVo.sectionReport || '--' }}</div>
            <div class="num" v-if="type == 'btg'">{{ sectionVo.noPass || '--' }}</div>
            <div class="num" v-if="type == 'tg'">{{ sectionVo.pass || '--' }}</div>
            <div class="num" v-if="type == 'jg'">{{ sectionVo.warn || '--' }}</div>
            
            <img src="@/assets/icon/total.jpg" v-if="type == 'zs'"/>
            <img src="@/assets/icon/reject.png" v-if="type == 'btg'"/>
            <img src="@/assets/icon/pass.png" v-if="type == 'tg'"/>
            <img src="@/assets/icon/warn.png" v-if="type == 'jg'" class="jg"/>
        </div>
    </div>
</template>

<style lang="less" scoped>
.main-card {
    width: 100%;
    height: 200px;
    .main-content {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      img{
        width: 70px;
        height: 70px;
        margin-left: 30px;
      }
      .jg{
        width: 60px;
        height: 60px;
      }
      .num{
        font-weight: 600;
        font-size: 32px;
        color: #1b2a52;
      }
  }
}
</style>